<template>
    <!-- 滚动容器 -->
    <div class="scroll-container" ref="scrollContainer">
        <!-- 使用transition包裹文本，实现滚动效果 -->
        <transition name="slide">
            <!-- 滚动文本内容，根据showText属性决定是否显示 -->
            <p ref="scrollingText" class="scrolling-text" v-if="showText">{{ currentText }}</p>
        </transition>
    </div>
</template>

<script>
export default {
    // 组件属性定义
    props: {
        // 滚动速度，单位为像素/秒，默认值为50
        speed: {
            type: Number,
            default: 50,
        },
        // 滚动方向，默认为左右滚动
        direction: {
            type: String,
            default: "left", // 默认滚动方向为左右
            // 验证器，确保direction属性值在指定范围内
            validator: function (value) {
                return ["left", "right", "up", "down"].includes(value);
            },
        },
        // 待滚动的文本内容，默认为空字符串
        textScroll: {
            type: String,
            default: "",
        },
    },
    // 组件数据定义
    data() {
        return {
            // 存储当前文本内容
            text: '',
            // 当前显示的文本内容
            currentText: "",
            // 控制文本显示与隐藏
            showText: true,
        };
    },
    // 组件生命周期钩子，创建时初始化文本内容
    created() {
        this.text = this.textScroll;
    },

    // 组件生命周期钩子，挂载后调整容器宽度并开始滚动文本
    mounted() {
        this.$nextTick(() => {
            this.adjustContainerWidth(); // 调整容器宽度
            this.scrollText(this.text); // 开始滚动文本
        });
        window.addEventListener("resize", this.adjustContainerWidth); // 添加resize事件监听
    },
    // 组件销毁前移除resize事件监听
    beforeDestroy() {
        window.removeEventListener("resize", this.adjustContainerWidth);
    },
    // 定义方法，用于调整文本容器宽度
    methods: {
        adjustContainerWidth() {
            const containerWidth = this.$refs.scrollContainer.offsetWidth; // 获取容器宽度
            this.$refs.scrollingText.style.width = `${containerWidth}px`; // 设置文本容器宽度
        },
        // 定义方法，用于滚动文本
        scrollText(text) {
            this.currentText = text; // 设置当前文本内容
            const textWidth = this.$refs.scrollingText.offsetWidth; // 获取文本宽度
            const textHeight = this.$refs.scrollingText.offsetHeight; // 获取文本高度
            let animationDuration;
            // 根据滚动方向设置动画持续时间和样式
            if (this.direction === "left" || this.direction === "right") {
                animationDuration = textWidth / this.speed; // 计算动画持续时间
                this.$refs.scrollingText.style.animation = `scrollRightToLeft ${animationDuration}s linear infinite`; // 设置动画样式
            } else if (this.direction === "up" || this.direction === "down") {
                animationDuration = textHeight / this.speed; // 计算动画持续时间
                this.$refs.scrollingText.style.animation = `scrollUpDown ${animationDuration}s linear infinite`; // 设置动画样式
            }
            // 监听动画结束事件，实现循环滚动
            this.$refs.scrollingText.addEventListener("animationend", () => {
                this.scrollText(text);
            });
        },
    },
};

</script>

<style>
/* 定义滚动容器样式，隐藏溢出部分文本 */
.scroll-container {
    overflow: hidden;
    width: 100%;
}

/* 定义滚动文本样式，防止文本换行 */
.scrolling-text {
    white-space: nowrap;
}

/* 定义文本从右向左滚动的动画 */
@keyframes scrollRightToLeft {
    0% {
        transform: translateX(100%);
    }

    100% {
        transform: translateX(-100%);
    }
}

/* 定义文本从下向上滚动的动画 */
@keyframes scrollUpDown {
    0% {
        transform: translateY(100%);
    }

    100% {
        transform: translateY(-100%);
    }
}

/* 定义transition动画效果，实现渐变过渡 */
.slide-enter-active,
.slide-leave-active {
    transition: opacity 0.5s;
}

/* 定义transition进入和离开时的样式 */
.slide-enter,
.slide-leave-to {
    opacity: 0;
}
</style>
